<template>
  <div
    class="tag-item flex-row-center"
    v-if="currentStatusKey"
    :class="`status-${status}`"
  >
    {{ currentStatusKey }}
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { EMatterStatus } from '@/components/statusShow/util'

/**
 * 事项状态展示
 */
const { status } = defineProps<{
  status: number | undefined
}>()

const currentStatusKey = computed(() => {
  if (status !== 0 && !status) {
    return null
  }
  return EMatterStatus[status] as keyof typeof EMatterStatus
})
</script>

<style scoped lang="scss">
.tag-item {
  display: inline-flex;
  padding: 0 vw(8);
  height: vh(24);
  border-radius: vw(2);
  font-size: vw(12);
  font-weight: 400;

  &.status-1 {
    background-color: rgba(47, 102, 232, 0.2);

    border: 1px solid rgba(47, 102, 232, 1);
    color: rgba(47, 102, 232, 1);
  }

  &.status-2 {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 1);
    color: rgba(255, 193, 7, 1);
  }

  &.status-3 {
    background: rgba(105, 207, 146, 0.2);
    border: 1px solid rgba(105, 207, 146, 1);
    color: rgba(105, 207, 146, 1);
  }

  &.status-4 {
    background: rgba(128, 128, 128, 0.2);
    border: 1px solid rgba(128, 128, 128, 1);
    color: rgba(128, 128, 128, 1);
  }
}
</style>
